# FileReader

FileReader是H5中的WebAPI，它允许Web应用应用程序异步读取存储在用户计算机中的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。

# 构造函数

FileReader()返回一个新构造的FileReader

# 属性

FileReader.error 表示在读取文件过程中发生的错误

FileReader.readyState表示FileReader状态的数字

FileReader.result文件的内容，该属性只有在读取操作完成后才生效，数据格式取决于启动读取操作的方式。

# 事件

FileReader.onabort处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload处理onload事件。该事件在读取操作完成时触发。

FileReader.onloadstart处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend处理loadend事件。该事件在读取操作结束时触发。（无论成功或失败）

FileReader.onprogress处理progress事件。该事件在读取Blob时触发。（在读取操作过程中持续触发）

注：由于FileReader继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。

# 方法

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的Blob内容，一旦完成，result属性中保存的将是被读取文件的ArrayBuffer数据对象。

FileReader.readAsBinaryString()

开始读取指定的Blob内容，一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的Blob内容，一旦完成，result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的Blob内容，一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

# 代码示例

当我们想实现一个上传文件即时预览图片的功能时，就可利用FileReader函数

let oFile = document.querySelector('#my_file') // 文件dom
let oImg = document.querySelector('#my_img') // 图片dom
oFile.onchange = function(){
    let fr = new FileReader()
    // 文件可以上传多个，利用 multiple，所以files是个类数组
    fr.readAsDataURL(oFile.files[0]) 
    fr.onload = function(){
        oImg.src = fr.result
    }
}